<template>
  <div class="login-keep">
    <!-- 提供一个账号密码登录，也提供了二维码扫描登录 -->
    <el-button @click="changeLogin">切换</el-button>

    <!-- 缓存时，默认是缓存所有已经渲染的组件 -->
    <!-- 现在只想缓存部分组件，那么使用 include 属性来决定只缓存哪些组件 -->
    <keep-alive include="UserAccount">
      <component :is="whichWay"></component>
    </keep-alive>
  </div>
</template>

<script>
import QrUser from '../components/QrUser.vue'
import UserAccount from '../components/UserAccount.vue'

export default {
  name: 'LoginKeep',
  data() {
    return {
      whichWay: 'UserAccount'
    }
  },
  components: {
    UserAccount,
    QrUser
  },
  methods: {
    changeLogin() {
      if(this.whichWay === 'UserAccount') {
        this.whichWay = 'QrUser'
      } else {
        this.whichWay = 'UserAccount'
      }
    }
  }
}
</script>